<template>
	<view class="container">
		<view class="lineC">
			<image class="line_left" src="https://upload-images.jianshu.io/upload_images/668798-207c5b9a79d98c06.png">
			</image>
			<view class="title">
				<text class="text">设置</text>
				<text class="text">贺卡签名</text>
			</view>
			<image class="line_right" src="https://upload-images.jianshu.io/upload_images/668798-207c5b9a79d98c06.png">
			</image>
		</view>
		<!-- 头像昵称 -->
		<view class="userInfo">
			<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" mode='aspectFit' :src="userInfo.avatarUrl"></image>
			</button>
			<input class="nickname" type="nickname" :value="userInfo.nickName" @blur="bindblur" @input="bindinput"
				placeholder-class="placeholder-class" placeholder="点击输入签名" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickName: '',
					avatarUrl: '/static/center_seleted.png'
				}
			}
		},
		created() {
			// 取出用户授权后存储的数据
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res.data != '') {
						this.userInfo = res.data;
					}
				}
			})
		},
		name: 'userinfoview',
		props: {},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户头像回调
			onChooseAvatar(e) {
				// 头像上传 分享出去使用
				this.userInfo.avatarUrl = e.detail.avatarUrl
				this.saveUserInfo()
				this.uploadAcatar(e.detail.avatarUrl)
			},
			// 上传头像
			uploadAcatar(imagePath) {
				let that = this
				uni.showLoading({
					title: '上传中'
				})
				uni.uploadFile({
					url: 'https://6gezkp4w.lc-cn-n1-shared.com/1.1/files/test',
					filePath: imagePath,
					name: 'file',
					header: {
						'X-LC-Id': '6Gezkp4WkQYrwzZefGSYJFZL-gzGzoHsz',
						'X-LC-Key': '6A64r7xKpEKzuKioOGKTm8i4'
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						let url = data.url
						that.userInfo.avatarUrl = url
						that.saveUserInfo()
						console.log('上传success：' + url)
					},
					fail(err) {
						console.log('上传err：' + err)
					},
					complete() {
						uni.hideLoading()
					}
				})
			},

			// 获取微信昵称
			bindblur(e) {
				this.userInfo.nickName = e.detail.value
				this.saveUserInfo()
			},
			bindinput(e) {
				// 输入的昵称确认后会再走一遍bindblur
				this.userInfo.nickName = e.detail.value
			},

			saveUserInfo() {
				uni.setStorage({
					key: 'userInfo',
					data: this.userInfo
				});
			},
			getUserInfo() {
				// 取出用户授权后存储的数据
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						if (res.data != '') {
							this.userInfo = res.data;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;

		.lineC {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			margin-bottom: 40rpx;

			.line_left {
				height: 60rpx;
			}

			.line_right {
				height: 60rpx;
			}

			.title {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 450rpx;

				.text {
					text-align: center;
					font-size: 40rpx;
					color: #f21313;
					font-weight: bold;
				}
			}
		}

		.userInfo {
			margin-top: 5rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;

				.avatar {
					border-radius: 50%;
					width: 150rpx;
					height: 150rpx;
				}
			}

			// 去掉button按钮的边框
			.avatar-btn::after {
				border: none;
			}

			.nickname {
				text-align: center;
				margin-top: 10px;
				color: #000;
				font-size: 40rpx;
				font-weight: bold;
			}

			.placeholder-class {
				font-size: 35rpx;
				color: #ddd;
			}
		}
	}
</style>
